<template>
  <div class="page-container">
	<!--工具栏-->
	<div class="toolbar" style="float:left;padding-top:10px;padding-left:15px;">
		<el-form :inline="true" :model="filters" :size="size">
			<el-form-item>
				<el-input v-model="filters.category" placeholder="输入目录名称"></el-input>
			</el-form-item>
			<el-form-item>
				<kt-button icon="fa fa-search" :label="$t('action.search')" perms="estate:flowable:upload" type="primary" @click="findPage(null)"/>
			</el-form-item>
		</el-form>
	</div>

	<div class="toolbar" style="float:right;padding-top:10px;padding-right:15px;">
		<el-form :inline="true" :size="size">
			<el-form-item>
				<el-button-group>
				<el-tooltip content="刷新" placement="top">
					<el-button icon="fa fa-refresh" @click="findPage(null)"></el-button>
				</el-tooltip>
				<el-tooltip content="列显示" placement="top">
					<el-button icon="fa fa-filter" @click="displayFilterColumnsDialog"></el-button>
				</el-tooltip>
				</el-button-group>
			</el-form-item>
		</el-form>
		<!--表格显示列界面-->    
		<table-column-filter-dialog ref="tableColumnFilterDialog" :columns="columns" 
			@handleFilterColumns="handleFilterColumns"> 
		</table-column-filter-dialog>
	</div>

	<!--表格内容栏-->
	<flowable-deploy-table 
		:height="350" 
		permsDeploy="estate:flowable:deploy" 
		permsHangup="estate:flowable:upload" 
		permsDelete="estate:flowable:delete"
		permsImport="estate:flowable:import"
		permsView="estate:flowable:view"
		:data="pageResult" :columns="filterColumns"

		@findPage="findPage" 
		@handleDeploy="handleDeploy" 
		@handleHangup="handleHangup"  
		@handleDelete="handleDelete"
		@handleImport="handleImport">
	</flowable-deploy-table>


	<!-- 新增选择部署类型界面 -->
	<el-dialog title="选择部署目录" width="40%" :visible.sync="dialogVisible" :close-on-click-modal="false">
		<el-form :model="dataForm" label-width="80px" :rules="dataFormRules" ref="dataForm" :size="size" label-position="right">
			<el-form-item label="选择目录" prop="category">
				<el-select
					v-model="dataForm.category"
					filterable
					remote
					reserve-keyword
					placeholder="请选择部署目录"
					:remote-method="initDjlxDict"
					:loading="loading">
							<el-option
									v-for="item in djlxData"
									:key="item.id"
									:label="item.label"
									:value="item.value">
							</el-option>
			</el-select>
			</el-form-item>

			<el-form-item label="文件名称" prop="fileName">
				<el-input v-model="dataForm.fileName" auto-complete="off" :readonly="true"></el-input>
			</el-form-item>

			<el-form-item label="文件路径" prop="filePath">
				<el-input v-model="dataForm.filePath" auto-complete="off" :readonly="true"></el-input>
			</el-form-item>

		</el-form>

		<div slot="footer" class="dialog-footer">
			<el-button :size="size" @click.native="dialogVisible=false">{{$t('action.cancel')}}</el-button>
			<el-button :size="size" type="primary" @click.native="submitForm" :loading="editLoading">{{$t('action.submit')}}</el-button>
		</div>
	</el-dialog>

  	<div> 
	<kt-upload
		:fileList=bpmnList
		:action=actionUrl
		:limit=3
		:fileAccept=fileAccept
		perms="estate:flowable:upload"></kt-upload>
  	</div>
  </div>
</template>

<script>
import PopupTreeInput from "@/components/PopupTreeInput"
import FlowableDeployTable from "@/views/Core/Estate/FlowableDeployTable"
import KtButton from "@/views/Core/KtButton"
import KtUpload from "@/views/Core/KtUpload"
import WebUpload from '@/views/Core/Upload/WebUpload';
import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog"
import { format } from "@/utils/datetime"
export default {
	components:{
		PopupTreeInput,
		FlowableDeployTable,
		KtButton,
		KtUpload,
		WebUpload,
		TableColumnFilterDialog
	},
	data() {
		return {
			size: 'small',
			actionUrl: '',
			bpmnList: [],
			fileData:{

			},
			fileAccept: ".xml",
			filters: {
				category: ''
			},
			columns: [],
			filterColumns: [],
			pageRequest: { pageNum: 1, pageSize: 10 },
			pageResult: {},

			operation: false, // true:新增, false:编辑
			dialogVisible: false, // 新增编辑界面是否显示
			editLoading: false,
			dataFormRules: {
				category: [
					{ required: true, message: '请输入分类', trigger: 'blur' }
				]
			},

			// category: '',
			// name: '',
			// key: '',
			// version: '',
			// deploymentId: '',
			// resourceName: '',
			// dgrmResourceName: '',
			// description: '',
			// hasStartFormKey: '',
			// hasGraphicalNotation: '',
			// suspensionState: '',
			// tenantId: '',
			// engineVersion: ''

			// 新增编辑界面数据
			dataForm: {
				id: "",
				fileMd5: "",
				fileName: "",
				filePath: "",
				fileType: "",
				flag: ""
			},
			loading: false,
			djlxData: [],
			
		}
	},
	methods: {
		// 获取分页数据
		findPage: function (data) {
			if(data !== null) {
				this.pageRequest = data.pageRequest
			}
			// this.pageRequest.columnFilters = {name: {name:'zghzxm', value:this.filters.zghzxm}}
			this.$api.flowable.queryModel(this.pageRequest).then((res) => {
				this.pageResult = res.data 
			}).then(data!=null?data.callback:'')
    },
        
        
		// 显示新增界面
		handleAdd: function () {
			this.dialogVisible = true
			this.operation = true
			this.dataForm = { 

			}
  	},
        
		// 部署
		handleDeploy: function (params) {
			this.dialogVisible = true
			this.dataForm = Object.assign({}, params.row)
			// this.$api.flowable.deploy(this.dataForm).then((res) => {
			// 	this.pageResult = res.data 
			// }).then(params!=null?params.callback:'')
		},
		
		submitForm: function () {
			this.$refs.dataForm.validate((valid) => {
				if (valid) {
					this.$confirm('确认部署该流程吗？', '提示', {}).then(() => {
						this.editLoading = true
						let params = Object.assign({}, this.dataForm)
						this.$api.flowable.deploy(params).then((res) => {
							this.editLoading = false
							if(res.code == 200) {
								this.$message({ message: '部署成功', type: 'success' })
								this.dialogVisible = false
								this.$refs['dataForm'].resetFields()
							} else {
								this.$message({message: '部署失败, ' + res.msg, type: 'error'})
							}
							this.findPage(null)
						})
					})
				}
			})
		},

    // 挂起
		handleHangup: function (params) {
			 
		},
		// 导入
		handleImport: function (params) {
			 
		},
		// 删除单条数据
		handleDelete: function (params) {
			 
		}, 	
		// 菜单树选中
		deptTreeCurrentChangeHandle (data, node) {},
		
		// 时间格式化
		dateFormat: function (row, column, cellValue, index){
			return format(row[column.property])
		},
		// 处理表格列过滤显示
    displayFilterColumnsDialog: function () {
			this.$refs.tableColumnFilterDialog.setDialogVisible(true)
    },
		// 处理表格列过滤显示
    handleFilterColumns: function (data) {
			this.filterColumns = data.filterColumns
			this.$refs.tableColumnFilterDialog.setDialogVisible(false)
    },
		// 处理表格列过滤显示
    initColumns: function () {
			this.columns = [
				{prop:"fileName", label:"文件名称", minWidth:80},
				{prop:"filePath", label:"文件存放路径", minWidth:100},  
				{prop:"fileType", label:"文件类型", minWidth:30},  
				{prop:"deployId", label:"部署ID", minWidth:60},  
 
 				// {prop:"category", label:"分类", minWidth:120},
				// {prop:"name", label:"名称", minWidth:120}, 
				// {prop:"key", label:"定义的KEY", minWidth:100}, 
				// {prop:"version", label:"版本", minWidth:100}, 
				// // {prop:"deploymentId", label:"部署ID", minWidth:120}, 
				// {prop:"resourceName", label:"bpmn文件名称", minWidth:120}, 
				// {prop:"dgrmResourceName", label:"png图片名称", minWidth:100}, 
				// {prop:"description", label:"描述", minWidth:120}, 
				// {prop:"hasStartFormKey", label:"是否存在开始节点formKey", minWidth:100}, 
				// {prop:"hasGraphicalNotation", label:"该流程定义文件是否有流程图的xml元素", minWidth:120},
				// {prop:"suspensionState", label:"挂起状态", minWidth:120},
				// {prop:"tenantId", label:"租户ID", minWidth:120},
				// {prop:"engineVersion", label:"引擎版本", minWidth:120}
			]
			this.filterColumns = JSON.parse(JSON.stringify(this.columns));
    },

		// 初始化登记类型，作为部署分类
    initDjlxDict: function (data) {
			this.$api.dict.findByType(data).then((res) => {
					this.djlxData = res.data;
			}).then(data!=null?data.callback:'')
		},
				
		// 文件导入处理方法
		handleRemove(file, bpmnList) {
			console.log(file, bpmnList);
		},
		handlePreview(file) {
			console.log(file);
		},
		handleExceed(files, bpmnList) {
			this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + bpmnList.length} 个文件`);
		},
		beforeRemove(file, bpmnList) {
			return this.$confirm(`确定移除 ${ file.name }？`);
		},
		handleSuccessUpload(file, fileiList) {
			console.log("上传成功")
		},
		handlerErrorUpload(file, fileiList) {
			console.log("上传失败")
		},
		uploadBpmn() {
			console.log(this.bpmnList.length)
		}
	  
	},
	mounted() { 
		this.actionUrl = this.global.baseUrl + '/flowable/upload'
    this.initColumns()
		this.findPage(null)
		this.initDjlxDict("djlx")

	}
}
</script>

<style scoped>

</style>